<template>
  <div class="content">
    <div class="elTable" ref="box">
      <!-- 表格 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabs"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
          <div class="tabInfo">
            <div class="search">
              <!-- 搜索按钮操作 -->
              <SearchForm
                :formObj="formObj"
                :formData="formInline"
              ></SearchForm>
            </div>
            <TabTable
              class="tabTable"
              :isShowBtn="true"
              :tableData="noteTableData"
              :pagination="pagination"
              @handleInfo="handleInfoView"
              @handleEdit="handleEditView"
              @onConfirm="handleCloseView"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
              :SecondAuth="SecondAuth"
              :postStatus="postStatus"
            ></TabTable>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import SearchForm from "@/components/searchForm/index.vue";
import TabTable from "../components/tabTable.vue";
import {
  demandDetailsList,
  demandDetailsEdit,
} from "@/api/demandDetails/index.js";
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";
import { reactive, ref, toRef, nextTick } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";

const router = useRouter();
const activeName = ref("first");
const box = ref(null);

const tabs = reactive([
  { label: "在招岗位", name: "first" },
  { label: "已关闭岗位", name: "second" },
  { label: "全部招聘岗位", name: "third" }
]);

const SecondAuth = ref(true);
const postStatus = ref(false);

// 使用 Map 存储每个 tab 对应的权限状态
const tabConfigs = new Map([
  ["first", { SecondAuth: true, postStatus: false }],
  ["second", { SecondAuth: false, postStatus: false }],
  ["third", { SecondAuth: true, postStatus: true }]
]);

watch(activeName, (newVal) => {
  const config = tabConfigs.get(newVal);
  if (config) {
    SecondAuth.value = config.SecondAuth;
    postStatus.value = config.postStatus;
  }
});

const buIdOptions = reactive([]);
const initialSearchForm = {
  buId: "",
  name: "",
  status: 0,
  pageNum: 1,
  pageSize: 10
};


const formInline = reactive({ ...initialSearchForm });

const formObj = reactive({
  item: [
    {
      select: true,
      label: "",
      prop: "buId",
      placeholder: "请选择申请部门",
      disabled: false,
      options: buIdOptions,
    },
    {
      input: true,
      label: "",
      prop: "name",
      placeholder: "请输入需求岗位",
      disabled: false,
    },
  ],
  btn: [
    {
      type: "primary",
      name: "搜索",
      clickFun: () => {
        handleQuery();
      },
    },
    {
      type: "primary",
      name: "重置",
      clickFun: () => {
        resetTabState();
      },
    },
  ],
});
const noteTableData = ref([]);
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});
const loading = ref(false);
onMounted(() => {
  box.value.style.width = `${window.innerWidth}px`;
  window.addEventListener("resize", updateWidth);
  getDemandDetailsList();
  getList();
});
onUnmounted(() => {
  window.removeEventListener("resize", updateWidth);
});
function updateWidth() {
  box.value.style.width = `${window.innerWidth}px`;
}
const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();

  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};

// 重置搜索表单、表格数据和分页信息
const resetTabState = () => {
  formInline.buId = initialSearchForm.requireDeptId;
  formInline.name = initialSearchForm.requireProposerName;
  formInline.status = 0;
  formInline.pageSize = initialSearchForm.pageSize;
  formInline.pageNum = initialSearchForm.pageNum;
  noteTableData.value = [];
  pagination.value = {
    total: 0,
    page: 1,
    limit: 10,
    pageSizes: [10, 20, 30, 50],
  };
  getList();
};
const handleClick = (tab) => {
  const tabTip = new Map([
    ["first", 0],
    ["second", 1],
    ["third", 2],
  ]);

  // 重置分页参数
  pagination.value = {
    total: 0,
    page: 1,
    limit: 10,
    pageSizes: [10, 20, 30, 50],
  };
  // 更新表单数据
  formInline.status = tabTip.get(tab.props.name);
  formInline.pageSize = 10;
  formInline.pageNum = 1;
  formInline.buId= "";
  formInline.name= ""
  // 使用nextTick确保状态更新后再调用getList
  nextTick(() => {
    getList();
  });
};
// 列表
const getList = async () => {
  const res = await demandDetailsList(formInline);
  if (res.rows && res.rows.length > 0) {
    noteTableData.value = res.rows;
    pagination.value.total = res.total;
  } else {
    noteTableData.value = [];
    pagination.value.total = 0;
  }
};
const sizeChange = (size) => {
  formInline.pageNum = 1; // 切换每页条数时，重置为第一页
  formInline.pageSize = size.limit;
  pagination.value.page = 1;
  pagination.value.limit = size.limit;
  getList();
};
const currentChange = (page) => {
  formInline.pageNum = page.page;
  formInline.pageSize = pagination.value.limit;
  pagination.value.page = page.page;
  getList();
};

const handleQuery = () => {
  getList();
};
const handleRefesh = (ref) => {
  ref.resetFields();
  getList();
};
// 查看
const handleInfoView = (row) => {
  router.push({
    name: "DemandView",
    query: {
      id: row.id,
      processId: row.processId ? row.processId : "",
    },
  });
};
// 编辑
const handleEditView = (row) => {
  router.push({
    name: "DemandEditor",
    query: {
      id: row.id,
      processId: row.processId ? row.processId : "",
    },
  });
};

const handleCloseView = (row) => {
  ElMessageBox.confirm(
    `确认要${row.jobStatus == 0 ? "关闭" : "开启"}该岗位吗?`,
    "提示",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      let params = {
        id: row.id,
        isStart: row.jobStatus == 0 ? 1 : 0,
        salaryWelfare: null,
      };
      demandDetailsEdit(params).then((res) => {
        if (res.code == 200) {
          ElMessage.success("关闭成功");
          getList();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

// @import "@/assets/styles/tableAndForm.scss/table.scss";
</style>
